<template>
	<div style="height: 100%">
		<div class="nav">
			<!--     左侧logo盒子-->
			<div class="nav-logo"><span class="title-content">北海职业学院OA管理系统</span></div>

			<!--     右侧头像盒子-->
			<div class="nav-avatar">
				<span class="logo">
					当前用户名：
					<span>{{ this.$store.state.userInfo.nickname }}</span>
				</span>
				<el-dropdown>
					<span class="el-dropdown-link"><el-avatar class="el-avatar" shape="square" :size="55" :src="avatarUrl"></el-avatar></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>个人中心</el-dropdown-item>
						<el-dropdown-item @click="logout" divided><span >注销登录</span></el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'NavBar',
	created() {
		this.getUserRole();
	},
	data() {
		return {
			avatarUrl: 'http://www.bhzyxy.net/images/logon.png',
			userRole: []
		};
	},
	methods: {
		getUserRole() {
			this.userRole = this.$store.state.userRoles;
			this.avatarUrl = this.$store.state.userInfo.avatar;
		},
		logout() {
			this.$store.commit('logout');
			this.$router.push({ path: '/login' });
			this.$message.success('注销登录成功');
		}
	}
};
</script>

<style scoped>
	.title-content{
		font-size: 20px;
		font-weight: 600;
	}
.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 15px;
	padding-right: 30px;
	height: 100%;
}
.el-dropdown-link {
	cursor: pointer;
	color: #409eff;
}

.nav-avatar {
	width: 30%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
}
.el-avatar {
	border-radius: 50%;
}
.nav-logo {
	font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
}
.logo {
	color: #333333;
	margin-right: 10px;
}
</style>
